<template>
	<!-- 动态改变底部paddingBottom -->
	<view
		class="MaterialOrderPass"
		:class="{
			unfold: isUnfold,
			skelett: isSkelett
		}"
	>
		<view class="MaterialOrderPass-nav">
			<DistributionNavBar title="详情" rgb="#fff">
				<template slot="left">
					<image :src="bankIcon" @click="clickBack" />
				</template>
			</DistributionNavBar>
		</view>

		<view class="MaterialOrderPass-header" :style="{ backgroundImage: 'url(' + headerBgImage + ')' }">
			<view class="MaterialOrderPass-header-detail">
				<view class="MaterialOrderPass-header-detail-left">
					<image :src="pageParams.faceImg" />
				</view>
				<view class="MaterialOrderPass-header-detail-right">
					<view @click.prevent.stop="openProductDetail">{{ pageParams.productName }}</view>
					<view>
						<template v-if="!isSkelett">
							<view>
								￥
								<text>{{ pageParams.salePriceYuan }}</text>
							</view>
							<view>￥{{ pageParams.originPriceYuan }}</view>
						</template>
					</view>
				</view>
			</view>

			<view class="MaterialOrderPass-header-income">
				<view class="MaterialOrderPass-header-income-item" :key="item.type" v-for="item in incomeTypeList">
					<view class="MaterialOrderPass-header-income-item-label">
						{{ item.label }}
					</view>
					<view class="MaterialOrderPass-header-income-item-money">{{ item.unit || '￥' }}{{ pageParams[item.type] || '' }}</view>
				</view>
			</view>
		</view>

		<view class="MaterialOrderPass-main">
			<ExaminationPassedList
				:isSkelett="isSkelett"
				:list="uploadStatusFileList"
				@changeSingleMaterialStatus="changeSingleMaterialStatus"
			/>
		</view>

		<view class="MaterialOrderPass-footer" v-show="!isSkelett" @touchmove.stop.prevent>
			<view class="MaterialOrderPass-footer-operate">
				<view @click.stop="changeIsUnfold">
					<image :src="operateIcon" />
					<text>{{ operateTitleLabel }}</text>
				</view>
			</view>

			<view class="MaterialOrderPass-footer-main">
				<view class="MaterialOrderPass-footer-main-item" :key="item.type" v-for="item in footerTypeList">
					<view class="MaterialOrderPass-footer-main-item-left">
						{{ item.label }}
					</view>
					<view class="MaterialOrderPass-footer-main-item-right">
						<text>{{ pageParams[item.type] }}</text>

						<template v-if="item.isCopy">
							<button @click.stop.prevent="copyorderNo(item)">复制</button>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { getMaterailDoneList, getMaterailDetail, changeOnOffShelf } from '@/api/material';

import ExaminationPassedList from './components/ExaminationPassedList';
import DistributionNavBar from '@/components/distributionNavBar/indeHome.vue';

const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const operateIcon = Object.freeze(`${defaultImageUrl}icon/icon_xq_up.png`);
const headerBgImage = Object.freeze(`${defaultImageUrl}image/img_xq_bg_income.png`);

const incomeTypeList = Object.freeze([
	{
		unit: '+ ',
		label: '今日收益(元）',
		type: 'todayIncomeYuan'
	},
	{
		label: '图片收益',
		type: 'imgIncomeYuan'
	},
	{
		label: '视频收益',
		type: 'videoIncomeYuan'
	},
	{
		label: '总收益',
		type: 'totalIncomeYuan'
	}
]);

const footerTypeList = Object.freeze([
	{
		isCopy: true,
		type: 'orderNo',
		label: '订单编号'
	},
	{
		type: 'approveTime',
		label: '审核时间'
	},
	{
		type: 'uploadTime',
		label: '提交时间'
	}
]);

export default {
	name: 'MaterialOrderPass',

	data() {
		return {
			bankIcon,
			operateIcon,
			headerBgImage,

			incomeTypeList,
			footerTypeList,

			isUnfold: false,
			isSkelett: true,

			pageParams: {},
			uploadStatusFileList: []
		};
	},

	computed: {
		operateTitleLabel() {
			const { isUnfold } = this;

			return `点击${isUnfold ? '收起' : '查看'}更多详情`;
		}
	},

	onLoad(params) {
		const { orderId, approveStatus = 3, uploadNo } = params;

		if (!orderId) {
			return;
		}

		const requestParams = {
			approveStatus,
			resourceType: 3,
			orderNo: uploadNo,
			productId: orderId
		};
		this.getAllPageData(requestParams);
	},

	methods: {
		changeIsUnfold() {
			this.isUnfold = !this.isUnfold;
		},

		clickBack() {
			uni.navigateBack();
		},

		getAllPageData(params) {
			Promise.all([
				getMaterailDetail(params),
				getMaterailDoneList({
					...params,
					pageIndex: 1,
					pageSize: 20,
					resourceType: 3,
					uploadType: 1
				})
			]).then((res) => {
				const [detailParams, materailList] = res || [];

				const { commission, ...otherParams } = detailParams?.data || {};
				this.pageParams = otherParams || {};

				this.uploadStatusFileList = (materailList?.data?.data || []).map((item) => {
					const { stock, previewNum, downloadNum, ...otherParams } = item;

					const isUnlimited = stock === -999;

					return {
						...otherParams,

						previewNum: `${previewNum}次`,
						downloadNum: `${downloadNum}次`,

						stock: isUnlimited ? '99+' : `${stock}次`
					};
				});
				this.isSkelett = false;
			});
		},

		copyorderNo({ type }) {
			const { pageParams } = this;

			uni.setClipboardData({
				data: pageParams[type]
			});
		},

		changeSingleMaterialStatus(index) {
			const single = this.uploadStatusFileList[index];

			this.$set(single, 'status', !single.status);
		},

		openProductDetail() {
			const {
				isSkelett,
				pageParams: { productId }
			} = this;

			if (isSkelett) {
				return;
			}

			uni.navigateTo({
				url: `/tandianPage/ProductDetail?productId=${productId}`
			});
		}
	},

	components: {
		DistributionNavBar,
		ExaminationPassedList
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MaterialOrderPass {
	overflow-x: hidden;
	transition: padding 0.3s;
	@include Db_iosBottomDistance(140rpx);

	&-nav {
		margin: 0 -20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	&-header {
		height: 320rpx;
		padding: 20rpx 20rpx 0;
		background-size: cover;
		background-repeat: no-repeat;

		&-detail {
			display: flex;

			&-left {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 16rpx;
				}
			}

			&-right {
				flex: 1;
				margin-top: -6rpx;
				padding-left: 16rpx;

				display: flex;

				> view {
					color: #333;
					font-size: 26rpx;
					font-weight: bold;

					&:first-child {
						flex: 1;
						line-height: 40rpx;
						text-decoration: underline;

						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					&:last-child {
						width: 138rpx;

						display: flex;
						flex-direction: column;

						view {
							text-align: right;

							&:first-child {
								font-size: 24rpx;

								text {
									font-size: 32rpx;
									font-family: font-number;
								}
							}

							&:last-child {
								color: #999;
								font-size: 20rpx;
								font-weight: 400;
								margin-top: 4rpx;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}

		&-income {
			margin-top: 24rpx;

			height: 144rpx;
			background: #fff;
			border-radius: 26rpx;
			border: 2rpx solid #ffe2d2;
			box-shadow: 0px 24rpx 62rpx 0px rgba(0, 0, 0, 0.02);

			display: flex;

			&-item {
				flex: 1;
				height: 100%;
				overflow: hidden;

				color: #333;
				font-size: 24rpx;
				text-align: center;

				&-label {
					margin-top: 26rpx;
					line-height: 32rpx;
				}

				&-money {
					margin-top: 12rpx;

					font-size: 28rpx;
					font-weight: bold;
					line-height: 48rpx;
				}

				&:first-child {
					width: 206rpx;
					position: relative;

					text-align: left;
					padding-left: 32rpx;

					.MaterialOrderPass-header-income-item-money {
						font-size: 36rpx;
						@include Db_moneyStyle();
					}

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						width: 4rpx;
						height: 64rpx;
						border-radius: 2rpx;
						background: #ffe2d2;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	&-main {
		padding: 20rpx 20rpx 0;
		margin-top: -25rpx;
		background: #f5f5f5;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	&-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		overflow: hidden;
		@include Db_iosBottomDistance(24rpx);

		background: #fff;
		border-radius: 24rpx 24rpx 0px 0px;
		box-shadow: 0px 0px 14rpx 0px rgba(51, 51, 51, 0.14);

		&-operate {
			color: #333;
			font-size: 28rpx;
			text-align: center;

			display: flex;
			justify-content: center;

			view {
				width: 240rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 16rpx 32rpx 8rpx;
				}

				text {
					line-height: 40rpx;
				}
			}
		}

		&-main {
			height: 0;
			overflow: hidden;
			padding: 0 20rpx;
			transition: all 0.3s;
			transform: translate3d(0, 0, 0);

			&-item {
				height: 92rpx;
				background: #f5f5f5;
				border-radius: 24rpx;
				margin-top: 12rpx;
				padding: 0 28rpx;

				display: flex;
				align-items: center;

				font-size: 26rpx;

				&-left {
					width: 172rpx;
					color: #666;
				}

				&-right {
					flex: 1;

					color: #1f1f1f;
					font-weight: bold;

					display: flex;
					align-items: center;
					justify-content: space-between;

					button {
						margin: 0;
						padding: 0;
						height: 36rpx;
						width: 64rpx;
						line-height: 32rpx;
						font-size: 20rpx;
						font-weight: 400;
						border-radius: 12rpx;
						border: 1px solid #cccccc;

						&::after {
							border: none;
						}
					}
				}

				&:first-child {
					margin-top: 0;
				}
			}
		}
	}

	&.unfold {
		@include Db_iosBottomDistance(552rpx);

		.MaterialOrderPass-footer {
			&-operate {
				image {
					transform: rotate(180deg);
				}
			}

			&-main {
				height: 416rpx;
				padding: 44rpx 20rpx 72rpx;
			}
		}
	}

	&.skelett {
		@include Db_iosBottomDistance();

		.MaterialOrderPass-header-detail,
		.MaterialOrderPass-header-income {
			border: none;
			border-radius: 12rpx;
			background: $skelettBgColor;

			view {
				visibility: hidden;
			}
		}
	}
}
</style>
